<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/ol.js"></script>

</head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">
    // 设置地图中心，此处进行坐标转换， 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标
    //[106.677, 36.7388]是下载地图的中心经纬度
    //var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');
    //var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');


    //创建地图
    var map = new ol.Map({
        view: new ol.View({
            center: [508833, 299749],//地图中心位置
            //center:[503409, 305653],
            zoom: 18//地图初始层级
/*            center: [12956575, 4853684],//地图中心位置
            //center:[503409, 305653],
            zoom: 10//地图初始层级*/
        }),
        //添加地图图层
        //这里注销在下面添加新的离线地图图层
        /*layers: [
         new ol.layer.Tile({
         source:new  ol.source.OSM()
         })
         ],*/
        //将地图添加到的map容器中
        target: 'map'
    });

    //给8位字符串文件名补0
    function zeroFill(num, len, radix) {
        var str = num.toString(radix || 10);
        while (str.length < len) {
            str = "0" + str;
        }
        return str;
    }

    var  source=new ol.source.XYZ({
        tileUrlFunction: function (coordinate) {
            //alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
            var x = 'C' + zeroFill(coordinate[1], 8, 16);
            var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
            var z = 'L' + zeroFill(coordinate[0], 2, 10);
            //return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
            return 'http://localhost:8080/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
        },
        projection: 'EPSG:3857'
    });
    // ol.source.XYZ添加瓦片地图的层
    var tileLayer = new ol.layer.Tile({
        source: source
    });
    map.addLayer(tileLayer);//添加到map里面

    map.on('click', function(evt) {
        var coor=evt.coordinate;
        alert(coor);

    });
</script>

</body>
</html>